<template>
  <button @click="sendFn">{{number===0?'发送验证码':number}}</button>
  <button @click="resumeFn"> 启动定时器</button>
  <button @click="pauseFn"> 停止定时器</button>
</template>

<script>
/**
 * useIntervalFn 对比 传统的 setInterval 有以下的优点：
 * 1、可通过  { immediate: false } 不立刻执行
 * 2、组件卸载的时候会自动清理定时器
 * 3、返回的 resume 函数用于启动定时器，pause函数用于停止定时器

 * */
import { ref } from 'vue'
import { useIntervalFn } from '@vueuse/shared'
export default {
  setup () {
    const number = ref(0)
    const { resume, pause } = useIntervalFn(() => {
      console.log('定时器启动.....')
      number.value--
    }, 1000, { immediate: false })
    const resumeFn = () => {
      resume()
    }
    const pauseFn = () => {
      pause()
    }
    const sendFn = () => {
      if (number.value === 0) number.value = 60
      resume()
      if (number.value <= 0) pause()
    }
    return { number, resumeFn, pauseFn, sendFn }
  }
}
</script>

<style>

</style>
